<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ifast - 文件管理器</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${rc.contextPath}/file/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${rc.contextPath}/file/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${rc.contextPath}/file/css/animate.css" rel="stylesheet">
    <link href="${rc.contextPath}/file/css/layui.css" rel="stylesheet">
    <link href="${rc.contextPath}/file/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" id="app">
    <div style="font-size:6px" class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="file-manager">
                        <div class="hr-line-dashed"></div>
                        <ul class="folder-list" style="padding: 0">
                            <li><a href="#" class="file-control " onclick="changeType('')">
                                <i class="fa fa-folder"></i>所有文件</a></li>
                            <li><a href="javascript:void(0)" onclick="changeType('image')">
                                <i class="fa fa-folder"></i>图片</a></li>
                            <li><a href="javascript:void(0)" onclick="changeType('video')">
                                <i class="fa fa-folder"></i>视频</a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="file-box" v-for="row in rows">
                        <div class="file">
                            <a href="#">
                                <span class="corner"></span>
                                <div class="image">
                                    <div v-if="row.type == 'image'">
                                        <img
                                             height="100%" alt="image" class="img-responsive" :src="row.url">
                                    </div>
                                    <div v-if="row.type == 'video'">
                                        <video class="img-responsive" :src="row.url"/>
                                    </div>

                                </div>
                                <div class="file-name">
                                    <br/>
                                    <small>{{row.originalName}}</small>
                                </div>
                                &nbsp;&nbsp; &nbsp; &nbsp;
                                <button class="btn btn-warning btn-xs copy" :url="row.url">复制
                                </button>&nbsp; &nbsp; &nbsp;
                                <button class="btn btn-danger btn-xs" @click="remove(row.id)">删除
                                </button>
                                &nbsp; &nbsp; &nbsp;
                                <button v-if="row.type == 'image'" class="btn btn-warning btn-xs"
                                        @click="eyeImages(row.url)">大图
                                </button>
                                <button v-if="row.type == 'video'" class="btn btn-warning btn-xs"
                                        @click="showVideo(row.url)">播放
                                </button>
                            </a>
                        </div>
                    </div>
                    <div id="incomeNum"></div>
                </div>
            </div>
            <div>
                <ul id="page"></ul>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="${rc.contextPath}/file/js/jquery.min.js?v=2.1.4"></script>
<script src="${rc.contextPath}/file/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${rc.contextPath}/file/js/bootstrap-paginator.min.js"></script>

<script src="${rc.contextPath}/file/js/content.js?v=1.0.0"></script>
<script src="${rc.contextPath}/file/js/layui.js"></script>
<script src="${rc.contextPath}/file/js/plugins/clipboard/clipboard.min.js"></script>
<script src="${rc.contextPath}/file/js/plugins/layer/layer.min.js"></script>
<script src="${rc.contextPath}/file/js/vue.min.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            total: 0,
            file: '',
            type: '',
            rows: '',
            pageInfo: {},
            pageNumber: 1,
            pageSize: 12,
        },
        methods: {
            getData: function () {
                $.getJSON("../sys/oss/list", {
                    type: this.type,
                    page: this.pageNumber,
                    limit: this.pageSize
                }, function (r) {
                    app.total = r.page.totalCount;
                    app.rows = r.page.list;
                    app.pageInfo = r.page;
                    app.page();
                });
            },
            showVideo: function (data) {
                var src = data;
                layer.open({
                    title: "播放",
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    maxmin: true,
                    area: ['700px', '500px'], //宽高
                    content: src
                });
            },
            eyeImages: function (data) {
                layer.photos({
                    photos: {
                        "title": "预览", //相册标题
                        "start": 0, //初始显示的图片序号，默认0
                        "area": ['100%', '100%'], //宽高
                        "data": [   //相册包含的图片，数组格式
                            {
                                "src": data //原图地址
                            }
                        ]
                    }, anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                });
            },
            page: function () {
                var options = {
                    currentPage: app.pageInfo.currPage, //当前页
                    totalPages: app.pageInfo.totalPage, //总页数
                    numberofPages: 4, //显示的页数
                    bootstrapMajorVersion: 3,
                    alignment: 'center',
                    size: 'large',
                    shouldShowPage: true,
                    itemTexts: function (type, page, current) { //修改显示文字
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "尾页";
                            case "page":
                                return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {
                        app.pageNumber = page;
                        app.getData();
                    }
                };
                $('#page').bootstrapPaginator(options);
            },
            remove: function (id) {
                if (id == null) {
                    return;
                }
                layer.confirm('确定要删除选中的记录？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: "../sys/oss/deletes/" + id,
                        type: "delete",
                        success: function (r) {
                            if (r.code == 0) {
                                layer.msg("成功");
                                app.getData();
                            } else {
                                layer.msg("失败");
                            }
                        }
                    });
                })
            }
        },
        created: function () {
            this.getData();
        }
    });
</script>
<script type="text/javascript">
    var clipboard = new Clipboard('button.copy', {
        text: function (trigger) {
            layer.msg('文件路径已复制到粘贴板');
            return $(trigger).attr('url');
        }
    });
    function changeType(i) {
        app.type = i;
        app.offset = 0;
        app.pageNumber= 1,
        app.pageSize= 12,
        app.getData();
    };
    layui.use('upload', function () {
        var $ = layui.jquery
            ,upload = layui.upload;
        //多文件列表示例
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: '../sys/oss/upload'
            , accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 0) { //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });
</script>
</body>
</html>
